<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="标题">
                <a-input v-model="queryParam.title" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="流程名称">
                <a-input v-model="queryParam.process_name" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button
                type="primary"
                @click="fetch({ pageSize: 10, ...queryParam })"
                >查询</a-button
              >
              <a-button
                style="margin-left: 8px"
                @click="() => (queryParam = {})"
                >重置</a-button
              >
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div style="margin: 0 0 10px 0">
        <a-space size="small"> </a-space>
      </div>

      <a-table
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        bordered
      >
        <template
          v-for="col in ['name', 'age', 'address']"
          :slot="col"
          slot-scope="text, record, index"
        >
          <div :key="col">
            {{ text }}
          </div>
        </template>
        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <a-space :size="4">
              <div slot="actions">
                <a-space :size="4">
                  <a-button
                    size="small"
                    type="primary"
                    @click="() => flowchart(record)"
                    >流程图</a-button
                  >
                  <a-button
                    size="small"
                    type="primary"
                    @click="() => formInfo(record)"
                    >详情</a-button
                  >
                  <a-popconfirm
                    placement="top"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="() => del(record)"
                  >
                    <template slot="title">
                      <p>确定删除数据吗？</p>
                    </template>
                    <a-button size="small" type="danger">删除</a-button>
                  </a-popconfirm>
                </a-space>
              </div>
            </a-space>
          </div>
        </template>
      </a-table>
    </a-card>
    <a-modal width="800px" v-model="visible" title="流程图" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 关闭 </a-button>
      </template>
      <img :src="imageUrl" alt="流程图" class="image" />
    </a-modal>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { findMyListPage, delData } from "@/api/activiti/toberead";
import axios from "axios";
import { formatDate } from "@/utils/date.js";
import FormInfo from "../processTask/FormInfo";
const columns = [
  {
    title: "标题",
    dataIndex: "title",
    sorter: true,
  },
  {
    title: "流程名称",
    dataIndex: "process_name",
    sorter: true,
  },
  {
    title: "节点名称",
    dataIndex: "node_name",
  },
  {
    title: "待阅人",
    dataIndex: "user_name",
  },
  {
    title: "状态",
    dataIndex: "is_read",
    customRender: (text, row, index) => {
      if (text == "0") {
        return "未阅读";
      } else if (text == "1") {
        return "已阅读";
      }
    },
  },
  {
    title: "阅读时间",
    dataIndex: "read_time",
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    width: "140px",
  },
];

export default {
  // 声明当前子组件接收父组件传递的属性
  props: {
    record: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      data: [],
      pagination: {},
      loading: false,
      columns,
      selectedRows: [],
      queryParam: {
        name: "",
        key: "",
        finished: "",
      },
      visible: false,
      imageUrl: "",
    };
  },
  components: { FormInfo },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows = selectedRows;
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            "selectedRows: ",
            selectedRows
          );
        },
      };
    },
  },
  mounted() {
    this.fetch({ pageSize: 10 });
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        pageSize: pagination.pageSize,
        pageNum: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch(params = {}) {
      this.loading = true;
      findMyListPage({
        ...params,
      }).then((response) => {
        console.log(response);
        const pagination = { ...this.pagination };
        pagination.total = response.data.data.total;
        this.loading = false;
        this.data = response.data.data.rows;
        this.pagination = pagination;
      });
    },

    flowchart(record) {
      this.imageUrl = "";
      this.visible = true;
      axios({
        method: "GET",
        url:
          process.env.VUE_APP_API_BASE_URL +
          `/activiti/processTask/readResource?processInstanceId=` +
          record.processInstanceId,
        responseType: "arraybuffer",
      })
        .then((res) => {
          return (
            "data:image/svg+xml;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((res) => {
          this.imageUrl = res;
        })
        .catch((e) => {
          if (e.toString().indexOf("429") !== -1) {
            this.$notification.warning({
              message: "请求超时,请稍后重试",
              description: "",
            });
          } else {
            this.$notification.warning({
              message: "获取流程图失败",
              description: "",
            });
          }
        });
    },
    formInfo(data) {
      let that = this;
      var record = {
        processInstanceId: data.processInstanceId,
        businessKey: data.businessKey,
        node_id: data.taskdefinitionkey
      };
      this.$dialog(
        FormInfo,
        // component props
        {
          record,
          on: {
            ok() {
              that.fetch({ pageSize: 10 });
              console.log("ok 回调");
            },
            cancel() {
              console.log("cancel 回调");
            },
            close() {
              console.log("modal close 回调");
            },
          },
        },
        // modal props
        {
          title: "详情",
          width: 1000,
          centered: true,
          maskClosable: false,
          footer: "",
        }
      );
    },
    handleCancel(e) {
      this.visible = false;
      this.complete_visible = false;
    },
    del(record) {
      delData(record.id).then((response) => {
        if (response.status == 200) {
          this.$success({
            title: "提示：",
            content: "数据删除成功",
          });
          this.fetch({ pageSize: 10 });
        } else {
          this.$error({
            title: "提示：",
            content: "数据删除失败",
          });
        }
      });
    },
  },
};
</script>
<style scoped>
</style>